<template>
  <div class="op-group comp-op-common">
    <div class="op-title">列格式</div>
    <div class="option-item">
      <div class="title-row">
        <span class="label">更改列格式</span>
        <a-button
          v-if="!isShowSub"
          class="op-btn"
          type="primary"
          size="small"
          @click="showDetail"
          >编辑</a-button
        >
      </div>
    </div>
    <div class="option-item">
      <div v-if="isShowSub" class="detail-panel">
        <div class="label">
          <span class="label">
            输出格式
          </span>
          <a-select
            :show-search="true"
            style="width: 100%;"
            @change="handleSelectChange"
          >
            <a-select-option
              v-for="(item, index) in formatList"
              :key="index"
              :value="item.name"
            >
              {{ item.name }}
              <div class="example">
                {{ item.value }}
              </div>
            </a-select-option>
          </a-select>
        </div>
        <div class="button-row">
          <a-button class="op-btn-sub" size="small" @click="cancel"
            >取消</a-button
          >
          <a-button
            class="op-btn-sub"
            type="primary"
            size="small"
            @click="doOption"
            >确定</a-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import DataStore, { OptionPreViewAction } from '@/store/modules/dataview'
import { apiGetFormatList } from '@/api/data-clean'

@Component({
  components: {},
})
export default class ColumnFormat extends Vue {
  @Prop({
    type: String,
    default() {
      return ''
    },
  })
  tableName: String | undefined

  //  是否进入编辑模式
  public isShowSub: boolean = false
  //  选择的列格式
  public formatType: string = ''
  private formatList: any = []

  /** 绑定值 */
  value: string = OptionPreViewAction.columnChangeFormat

  public get columnName() {
    return this.tableSelectColumn.name
  }

  private get tableSelectColumn() {
    return DataStore.tableSelectColumns[0]
  }

  public get tableColumns() {
    return DataStore.tableColumns
  }

  @Watch('isShowSub')
  async handleShowSubChange(newValue: boolean) {
    if (newValue) {
      const data = {
        col: this.tableSelectColumn.name,
        type: this.tableSelectColumn.desc,
        semantic: this.tableSelectColumn.semantic,
        table: this.tableName,
      }
      const response = await apiGetFormatList({ data })
      console.log('res', response)
      const { result, code } = response.data
      if (code === 100 && result) {
        this.formatList = this.transferObjToArray(result)
      }
    }
  }

  private transferObjToArray(value: any) {
    const result: any = []
    // eslint-disable-next-line no-restricted-syntax
    for (const i in value) {
      if (i) {
        result.push({
          name: i,
          value: value[i],
        })
      }
    }
    return result
  }

  public handleSelectChange(value: any) {
    this.formatType = value
  }

  //  点击取消 btn - 清空，关闭推荐面板
  public cancel() {
    this.isShowSub = false
  }

  public showDetail() {
    this.isShowSub = true
  }

  /**
   * 创建新列名
   */
  private CreateNewColumnName() {
    const newColumnName: string = `${this.columnName}`
    //  防止重名；
    let index = 1
    let i = 0
    const { length } = this.tableColumns
    while (i < length) {
      if (this.tableColumns[i].name === `${newColumnName}_${index}`) {
        index += 1
        i = 0 //  重头开始匹配
      } else {
        i += 1
      }
    }
    return index > 0 ? `${newColumnName}_${index}` : newColumnName
  }

  public doOption() {
    this.$emit('actiondone', {
      action: this.value,
      col: this.tableSelectColumn.name,
      type: this.tableSelectColumn.desc,
      semantic: this.tableSelectColumn.semantic,
      format: this.formatType,
      columnName: this.CreateNewColumnName(),
    })
  }
}
</script>

<style lang="less" scoped>
@import url('../op.less');

.detail-panel {
  display: inline-block;
  flex-flow: column;
  padding: 8px 22px 0 28px;
  width: 100%;

  /deep/ .ant-select-selection--single {
    height: 24px;

    .ant-select-selection__rendered {
      line-height: 24px;
    }
  }

  /deep/ .ant-select-selection-selected-value {
    color: rgb(93, 99, 126);
    font-family: 'PingFangSC-Regular';
    line-height: 22px;
  }

  .label {
    align-items: center;
    display: flex;
    margin-right: 10px;
    min-width: 65px;
  }

  .button-row {
    padding-right: 10px;
  }
}

/deep/ .ant-select-selection-selected-value {
  .example {
    display: none;
  }
}
</style>
<style lang="less">
.ant-select-dropdown-menu-item .example {
  color: #9a9fb2;
}
</style>
